<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>todoList Jquery</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
    <div>
        <input type="text" name="" id="input">
        <button id="btn">提交</button>
        <ul id="ul"></ul>
    </div>

    <script>
        function Page() {

        }
        $.extend(Page.prototype, {
            init: function() {
                this.bindEvents()
            },
            bindEvents: function() {
                var btn = $('#btn');
                btn.on('click', $.proxy(this.handleBtnClick,this))
            },
            handleBtnClick: function() {
                var inputEle = $('input');
                var inputValue = inputEle.val();
                var ulEle = $('#ul');
                ulEle.append('<li>' + inputValue + '</li>');
                inputEle.val('');
            }      
        })
        var page = new Page();
        page.init();
    </script>
</body>
</html>